<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #svg1 {
            position: absolute;
            margin-left: 15px;
        }

        #svg2 {
            position: relative;
            margin-top: 30px;
        }

        #svg3 {
            position: relative;
            margin-bottom: 210px;
            margin-right: 200px;
        }
    </style>
</head>

<body>
    <div>
        <svg width="130" height="30" id="svg1">
            <path d="
              M 10,30
              L 30,0
              L 50,30
              L 70,0
              L 90,30
              L 110,0
              L 130,30
              Z
            "></path>
        </svg>
        <svg width="200" height="300" id="svg2">
            <rect x="0" y="0" height="170" width=" 170" ry="20" stroke="black" stroke-width="2" fill="white"></rect>
            <svg width="100" height="100" id="svg3">
                <g id="circle1">
                    <circle cx="50" cy="50" r="20" style="stroke: black; fill: white" />
                </g>
                <g id="circle2">
                    <circle cx="60" cy="55" r="7" style="stroke: black; fill: black" />
                </g>
            </svg>
            <use href="#circle1" x="75" y="0" style="stroke: black; fill: white" />
            <use href="#circle2" x="75" y="0" style="stroke: black; fill: white" />
            <path d="
                M 75,130
                L 85,80
                L 95,130
                Z
              " style="stroke: black; fill: white">
            </path>
            <svg width="300" height="180">
                <ellipse cx="85" cy="150" ry="10" rx="30" stroke="black" fill="white" />
            </svg>
        </svg>

    </div>
</body>

</html>